  google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawVisualizationmsp);
      google.setOnLoadCallback(drawVisualizationmwp);
      google.setOnLoadCallback(drawVisualizationmlp);
      google.setOnLoadCallback(drawVisualizationClients);
      google.setOnLoadCallback(drawVisualizationClientsMoney);


      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      
      function drawVisualizationmsp() {
  // Create and populate the data table.  
  values =$("#msp_chart_value").val(); 
  array_values = Array();
  array_values = JSON.parse(values); 
  $.each(array_values, function(key,value){
   if(!isNaN(value[1])){
    value[1]=parseInt(value[1]);
  }
});
  var data  = google.visualization.arrayToDataTable(array_values);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('msp_chart')).
  draw(data,
   {title:"",
    legend: 'none',
   width:600, height:400,
   hAxis: {title: "Product name"},
   vAxis: {title: "Number of sales"}}
   );
}
function drawVisualizationmwp() {
  // Create and populate the data table.  
  values =$("#mwp_chart_value").val(); 
  array_values = Array();
  array_values = JSON.parse(values); 
  $.each(array_values, function(key,value){
   if(!isNaN(value[1])){
    value[1]=parseInt(value[1]);
  }
});
  var data  = google.visualization.arrayToDataTable(array_values);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('msw_chart')).
  draw(data,
   {title:"",
    legend: 'none',
   width:600, height:400,
   hAxis: {title: "Product name"},
   vAxis: {title: "wishmeter"}}
   );
}

function drawVisualizationmlp() {
  // Create and populate the data table.  
  values =$("#mlp_chart_value").val(); 
  array_values = Array();
  array_values = JSON.parse(values); 
  $.each(array_values, function(key,value){
   if(!isNaN(value[1])){
    value[1]=parseInt(value[1]);
  }
});
  var data  = google.visualization.arrayToDataTable(array_values);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('mlp_chart')).
  draw(data,
   {title:"",
    legend: 'none',
   width:600, height:400,
   hAxis: {title: "Product name"},
   vAxis: {title: "Rating"}}
   );
}

function drawVisualizationClients() {
  // Create and populate the data table.  
  values =$("#clients_chart_value").val(); 
  array_values = Array();
  array_values = JSON.parse(values); 
  $.each(array_values, function(key,value){
   if(!isNaN(value[1])){
    value[1]=parseInt(value[1]);
  }
});
  var data  = google.visualization.arrayToDataTable(array_values);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('clients_chart')).
  draw(data,
   {title:"",
    legend: 'none',
   width:600, height:400,
   hAxis: {title: "Client name"},
   vAxis: {title: "Nr. Orders"}}
   );
}
function drawVisualizationClientsMoney() {
  // Create and populate the data table.  
  values =$("#clients_money_chart_value").val(); 
  array_values = Array();
  array_values = JSON.parse(values); 
  $.each(array_values, function(key,value){
   if(!isNaN(value[1])){
    value[1]=parseInt(value[1]);
  }
});
  var data  = google.visualization.arrayToDataTable(array_values);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('clients_money_chart')).
  draw(data,
   {title:"",
    legend: 'none',
   width:600, height:400,
   hAxis: {title: "Client name"},
   vAxis: {title: "Money"}}
   );
}